<!-- 默认模板 -->
<template>
  <view class="ran-home">
    <img :src="item.src" alt="" />
    <view>
      <view>
        <text>
          {{ item.name }}
        </text>
        <text> 粉丝 {{ item.num }}K </text>
      </view>

      <text>
        {{ getRank(item.rank) }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 获得排名
    getRank(rank) {
      if (rank <= 3) {
        return "TOP" + rank;
      }
      return rank + "TH";
    },
  },
  components: {},
  //   传入的参数 item是个对象
  props: {
    item: {
      type: Object,
      default: {
        name: "",
        src: "",
        num: "",
        // 排名
        rank: "",
      },
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 45px;
  height: 45px;
}

.ran-home {
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
</style>